<template>
  <view class="reward-container">
    <!-- 生成新奖励 -->
    <view class="generate-section">
      <text class="section-title">生成新奖励</text>
      <view class="achievement-info">
        <text class="achievement-text">当前成就：完成4关卡</text>
        <text class="score-text">积分：100</text>
      </view>
      <button
        class="generate-btn"
        @click="generateReward"
        :disabled="!canGenerate"
      >
        生成奖励图片
      </button>
    </view>

    <!-- 历史奖励 -->
    <view class="history-section">
      <text class="section-title">历史奖励</text>
      <view class="reward-grid">
        <view
          v-for="(reward, index) in rewardHistory"
          :key="index"
          class="reward-item"
          @click="previewImage(reward.image)"
        >
          <image
            class="reward-image"
            :src="reward.image"
            mode="aspectFill"
          />
          <view class="reward-info">
            <text class="reward-date">{{ reward.date }}</text>
            <text class="reward-desc">{{ reward.description }}</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="rewardHistory.length === 0" class="empty-state">
        <text>暂无奖励记录</text>
        <text class="tip">完成游戏关卡即可获得奖励</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// Mock 数据
const rewardHistory = ref([
  {
    id: 1,
    image: 'https://picsum.photos/400/300?time=1',
    date: '2024-03-20',
    description: '完成春天组诗词'
  },
  {
    id: 2,
    image: 'https://picsum.photos/400/300?time=2',
    date: '2024-03-19',
    description: '完成夏天组诗词'
  }
])

const score = ref(100)
const canGenerate = computed(() => score.value >= 100)

// 生成奖励
const generateReward = () => {
  if (!canGenerate.value) {
    uni.showToast({
      title: '积分不足',
      icon: 'none'
    })
    return
  }

  uni.showLoading({
    title: '生成中...'
  })

  // Mock 生成过程
  setTimeout(() => {
    const newReward = {
      id: rewardHistory.value.length + 1,
      image: '/static/rewards/new_reward.png',
      date: new Date().toISOString().split('T')[0],
      description: '完成新的诗词组合'
    }

    rewardHistory.value.unshift(newReward)
    score.value -= 100

    uni.hideLoading()
    uni.showToast({
      title: '生成成功',
      icon: 'success'
    })
  }, 2000)
}

// 预览图片
const previewImage = (image) => {
  uni.previewImage({
    urls: [image],
    current: image
  })
}
</script>

<style>
.reward-container {
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.generate-section {
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.achievement-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.achievement-text,
.score-text {
  font-size: 16px;
  color: #666;
}

.generate-btn {
  width: 100%;
  padding: 15px;
  background-color: #3cc51f;
  color: white;
  border-radius: 5px;
}

.generate-btn[disabled] {
  background-color: #ccc;
  color: #999;
}

.history-section {
  margin-bottom: 20px;
}

.reward-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.reward-item {
  background-color: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
}

.reward-image {
  width: 100%;
  height: 150px;
}

.reward-info {
  padding: 10px;
}

.reward-date {
  font-size: 12px;
  color: #999;
}

.reward-desc {
  font-size: 14px;
  margin-top: 5px;
}

.empty-state {
  text-align: center;
  padding: 50px 0;
  color: #999;
}

.tip {
  font-size: 14px;
  margin-top: 10px;
  color: #666;
}
</style>